<html>
<head>
    <script src="../tma.js"></script>
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;
        uniform mat4 uMVMatrix;
        uniform mat4 uPMatrix;
        uniform vec4 uColor;
        varying vec4 vColor;
        void main() {
            gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
            vColor = uColor;
        }
    </script>
    <script id="shader-fs" type="x-shader/x-fragment">
        precision mediump float;
        varying vec4 vColor;
        void main() {
            gl_FragColor = vColor;
        }
    </script>
    <script>
        tma.extlibs = [ 'ext/gl-matrix.js' ];
        tma.onload = function () {
            var screen = new TmaScreen(TmaScreen.FULL_WIDTH,
                                       TmaScreen.FULL_HEIGHT,
                                       TmaScreen.MODE_3D);
            screen.attachTo(TmaScreen.BODY);

            // Initializes buffers.
            var resolution = 32;
            var circleVertices = screen.createBuffer(function (resolution) {
                var vertices = [ 0, 0, 0 ];
                for (var i = 0; i <= resolution; ++i) {
                    var w = 2.0 * Math.PI * i / resolution;
                    vertices =
                            vertices.concat([ Math.cos(w), Math.sin(w), 0.0 ]);
                }
                return vertices;
            } (resolution));
            circleVertices.items = resolution + 2;

            // Initializes program with shaders.
            var program = screen.createProgram('shader-vs', 'shader-fs');

            // Initializes matrices.
            var pMatrix = mat4.create();
            var mvMatrix = mat4.create();
            mat4.perspective(
                    45, screen.width / screen.height, 0.1, 1000.0, pMatrix);
            mat4.translate(pMatrix, [ 0.0, 0.0, -250.0 ]);
            mat4.identity(mvMatrix);

            // Initializes screen.
            screen.fillColor(0.0, 0.0, 0.0, 1.0);

            // Draws circle.
            program.setAttributeArray(
                    'aVertexPosition', circleVertices, 0, 3, 0);
            setInterval(function () {
                mat4.rotate(pMatrix, 0.05, [ 0.1, 0.15, 0.0 ]);
                program.setUniformMatrix('uPMatrix', pMatrix);
                screen.fillColor(0.0, 0.0, 0.0, 1.0);
                for (var y = -100; y <= 100; y += 20) {
                    for (var x = -100; x <= 100; x += 20) {
                        var mat = mat4.create(mvMatrix);
                        mat4.translate(mat, [x, y, 0.0]);
                        program.setUniformMatrix('uMVMatrix', mat);
                        program.setUniformVector('uColor',
                                [ (x + 100) / 200, (y + 100) / 200, 1.0, 1.0 ]);
                        program.drawArrays(Tma3DScreen.MODE_TRIANGLE_FAN, 0,
                                circleVertices.items);
                    }
                }
            }, 15);
        };
    </script>
</head>
</html>